<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	
<h3>垂直或基本表单</h3>
<div class="container">
	<form action="" role='form'><!-- 向父 <form> 元素添加 role="form" -->
		
<!-- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的 -->
		<div class="form-group">
			<label for="name" >名称：</label>
			<input type="text" class="control" placeholder="请输入名称">
		</div>

		<div class="form-group"><!-- 并排表单 -->
			<label for="inputFile">文件输入</label>
			<input type="file" id="inputFile">
			<p class="help-block">这里是块级帮助文本的实例</p>
		</div>

		<div class="checkbox">
   			 <label><input type="checkbox">请打勾</label>
 		</div>
		
		<button type="submit" class="btn btn-default">提交</button>
	</form>

</div>


 <br><br><br><br> 
 	<h3>内联表单</h3>
<div class="container">
	<form class="form-inline" role="form"><!-- 行内表单 -->
	  <div class="form-group">
	    <label class="sr-only" for="name">名称</label>
	    <input type="text" class="form-control" id="name" placeholder="请输入名称">
	  </div>
	  <div class="form-group">
	    <label class="sr-only" for="inputfile">文件输入</label>
	    <input type="file" id="inputfile">
	  </div>
	  <div class="checkbox">
	    <label>
	      <input type="checkbox">请打勾
	    </label>
	  </div>
	  <button type="submit" class="btn btn-default">提交</button>
	</form>
</div>





 <br><br><br><br> 
 	<h3>水平表单</h3>
<div class="container">
		
	<form action="" class="from-horizontal" role="form">
		<div class="form-group">
			<label for="firstname" class="col-sm-2 control-label">名字</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="firstname" pleaceholder="请输入名字">
			</div>
		</div>
		
		<div class="form-group">
			<label for="lastname" class="col-sm-2 control-label">姓：</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="lastname" pleaceholder="请输入姓">
			</div>
		</div>

		<div class="form-group">
			<!-- col-sm-offset-2  为空两格 ,col-sm-10为占据10格-->
			<div class="col-sm-offset-2 col-sm-10" style="border:1px solid red;">
				<div class="checkbox">
					<label ><input type="checkbox">请记住我</label>
				</div>
			</div>
		</div>

		<div class="form-group">
			<!-- 空2格，占据10格 -->
			<div class="col-sm-offset-2 col-sm-10" style="border:1px solid red;">
				<button type="submit" class="btn brn-default">登录</button>
			</div>
		</div>


	</form>

</div>










 <br><br><br><br>  <br><br><br><br>  <br><br><br><hr> 
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
	<script src="lib/jquery/jquery-1.11.0.min.js"></script>
	<script src="lib/lib/js/bootstrap.min.js"></script>
</body>
</html>